<template lang="html">
  <div class="follw">
     <div class="follow-words">
      <h3>关注鲸鱼</h3>
      <p>鲸鱼是鲸鱼金融旗下一款专注于服务，低风险投资爱好者的普惠金融新工具，年化收益4.0%以上，一元起投，随存随取，手续费全免。</p>
      <ul>
        <li>累计交易金额：<label v-text="jiaoyier"></label>元</li>
        <li >为用户赚取：<label v-text="forRmb"></label>元</li>
        <li>平台总用户：<label v-text="allyonghu"></label>人</li>
         <span >数据截止于<label v-text="dateShown"></label></span>
      </ul>

      <div class="icon-main">
        <div class="icon-list" >
          <img src="../assets/duifu.png" alt="a">
          <p >100%兑付</p>
        </div>
        <div class="icon-list" >
          <img src="../assets/gaoshouyi.png" alt="a">
          <p >高收益</p>
        </div>
        <div class="icon-list" >
          <img src="../assets/shouxu.png" alt="a">
          <p >免手续费</p>
        </div>
        <div class="icon-list" >
          <img src="../assets/cunqu.png" alt="a">
          <p >随存随取</p>
        </div>
      </div>
    </div>
    <div class="code-wrap">

      <div class="code-detail">
        <div class="erweima">
          <img src="../assets/erweima.png" alt="a">
          <h5><  长按二维码</h5>
          <p>关注鲸鱼湖南公众号</p>
          <p>更多福利惊喜！</p>
          <p>周周送不停！</p>
        </div>
        <h1 v-text="jinrTel"></h1>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props:{
    jiaoyier: {
      type: String,
      default: '14,816,781,319', //累计交易金额
    },
    forRmb: {
      type: String,
      default: '200,480,000',  //为用户赚取
    },
    allyonghu: {
      type: String,
      default: '2,473,453', //平台总用户
    },
    dateShown: {
      type: String,
      default: '2017年3月底', //数据截止于
    },
    jinrTel: {
      type: String,
      default: '鲸鱼唯一客服电话: 10102015',
    },
    host: {
      type: String,
      default: 'hbjr.jinrgame.com',
    },

  },
  data () {
    return {
      url: '/HunanLaohuji/getFlatformData'
    }
  },
  created () {
    let host = 'http://'+this.host
    let url = this.initGetUrl(host, this.url)

    this.$http.get(url,  {
      params: {
        hb_key: this.hb_key
      }
    }).then((response) => {  // Lambda写法
      response = response.data;
      if (response.code == 10000){
        this.jiaoyier = response.data.zu_money
        this.forRmb = response.data.total_shouyu
        this.allyonghu = response.data.number
      }
    });

    this.$root.eventHub.$on('showRegisterFun', (val) => {
      this.$nextTick(() => {
        console.log("负组件")
        this.hidden = true
        this.isRegister = true

      });
    });
  },
  methods:{

    initGetUrl: function(host, url){
      return host+ url
    },
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

  .follow-words
    padding  0 rem(95)
    font-size rem(28)
    color #ffffff
    h3
      text-align center
      font-weight bold
      line-height rem(80)
      background url("../assets/guanzu_xie.png") no-repeat center
      background-size rem(670) rem(15)
    p
      padding-bottom  rem(30)
      line-height rem(34)
    ul
      overflow hidden
      li
        line-height rem(36)
        font-weight bold
      span
        float right
        padding-right rem(20)
        line-height rem(80)
        font-size rem(22)
        font-weight normal
        color #ffffff
    .icon-main
      overflow hidden
      padding-bottom rem(60)
      text-align center
      .icon-list
        display inline-block
        margin-right rem(10)
        text-align center
        width rem(120)
        font-size rem(24)
        img
          width 100%
        p
          line-height rem(48)
  .code-wrap
    position relative
    padding  0 rem(75)
    .code-detail
      padding rem(22) rem(10) rem(18) rem(20)
      margin-bottom rem(8)
      border 0.04rem #ffcc21 solid
      .erweima
        overflow hidden
        border-bottom 1px #c1deff solid
        font-size rem(28)
        color #ffffff
        img
          float left
          width rem(256)
          padding 0 rem(44) rem(22) rem(5)
        h5
          padding-top rem(20)
          line-height rem(70)
        p
          line-height rem(36)
          font-size rem(26)
      h1
        line-height rem(70)
        text-align center
        font-size rem(28)
        font-weight bold
        color #ffffff

</style>
